<template>
	<div>
		<!--查看用户评论-->
		<el-dialog title="试题评论" :visible.sync="commentVisible" :modal-append-to-body="false" width="60%"
			@close="handleClose">
			<div class="row-me flex-end margin-bottom20">
				<el-button type="primary" @click="addComment">新增评论</el-button>
			</div>
			<el-table :data="tableCommentData" border class="table" header-cell-class-name="table-header-style"
				@expand-change="expandChange">
				<el-table-column type="expand">
					<template slot-scope="scope">
						<el-table :data="scope.row.replyData" border header-cell-class-name="table-header">
							<el-table-column label="回复用户头像/昵称" align="center">
								<template slot-scope="scope">
									<div class="row-me center-all">
										<el-image class="width40 height40 margin-right5" :src="scope.row.userIcon"
											:preview-src-list="[scope.row.userIcon]"></el-image>
										<span>{{scope.row.userName}}</span>
									</div>
								</template>
							</el-table-column>
							<el-table-column prop="content" label="回复内容"></el-table-column>
							<el-table-column prop="thumbUp" label="点赞数" align="center"></el-table-column>
							<el-table-column label="状态" align="center">
								<template slot-scope="scope">
									<el-tag :type="scope.row.status == '1' ? 'success' : 'danger'">
										{{ scope.row.status == '1' ? '已通过' : '未通过' }}
									</el-tag>
								</template>
							</el-table-column>
							<el-table-column prop="createTime" label="回复时间" align="center"></el-table-column>
						</el-table>
					</template>
				</el-table-column>
				<el-table-column label="用户头像/昵称" align="center">
					<template slot-scope="scope">
						<div class="row-me center-all">
							<el-image class="width40 height40 margin-right5" :src="scope.row.userIcon"
								:preview-src-list="[scope.row.userIcon]"></el-image>
							<span>{{scope.row.userName}}</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="content" label="评论内容"></el-table-column>
				<el-table-column prop="thumbUp" label="点赞数" align="center"></el-table-column>
				<el-table-column label="评论状态" align="center">
					<template slot-scope="scope">
						<el-tag :type="scope.row.status == '1' ? 'success' : 'danger'">
							{{ scope.row.status == '1' ? '已通过' : '未通过' }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="评论时间" width="160" align="center"></el-table-column>
				<el-table-column label="操作" width="160" align="center">
					<template slot-scope="scope">
						<el-button type="text" @click="addComment(scope.row)">编辑</el-button>
						<el-button type="text" @click="delComment(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="margin-top10">
				<el-pagination background layout="->,total,sizes, prev, pager, next" :current-page="query.pageNumber"
					:page-sizes="[10, 20, 30, 40]" @size-change="handleSizeExamChange" :page-size="query.pageSize"
					:total="pageTotal" @current-change="handlePageExamChange">
				</el-pagination>
			</div>
			<span slot="footer">
				<el-button type="primary" @click="handleClose">关 闭</el-button>
			</span>
		</el-dialog>

		<!-- 新增编辑评论 -->
		<el-dialog :title="commentTitle" :visible.sync="addCommentVisible" :modal-append-to-body="false" width="600px">
			<el-form :model="commentForm" label-width="80px">
				<el-form-item label="用户名">
					<div class="row-me row-center">
						<el-input class="flex1 margin-right10" placeholder="请输入用户名" v-model="commentForm.userName"></el-input>
						<el-tag v-for="(item,index) in commentThreeData" :key="index" class="margin-right10 pointer"
							@click="$set(commentForm,'userName',item.userName)">{{item.userName}}</el-tag>
					</div>
				</el-form-item>
				<el-form-item label="用户头像">
					<div class="row-me flex-end2">
						<el-image v-if="commentForm.userIcon" class="width80 height80" :src="commentForm.userIcon"
							:preview-src-list="[commentForm.userIcon]"></el-image>
						<el-button type="text" @click="clickImg" class="margin-left10">选择历史头像</el-button>
					</div>
				</el-form-item>
				<el-form-item label="评论内容">
					<el-input type="textarea" rows="6" class="width400" placeholder="请输入评论内容"
						v-model="commentForm.content"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addCommentVisible = false">取 消</el-button>
				<el-button type="primary" @click="addCommentSave">确 定</el-button>
			</span>
		</el-dialog>

		<imgLibrary ref="imgLibrary" @handleImgOk="handleImgOk"></imgLibrary>
	</div>
</template>

<script>
	import uploadLocal from "@/components/Upload/multiUploadLocal"
	import imgLibrary from "@/components/imgLibrary"
	export default {
		name: 'questionComment',
		components: {
			uploadLocal,
			imgLibrary
		},
		data() {
			return {
				commentVisible: false,
				tableCommentData: [],
				commentForm: {},
				commentTitle: '',
				commentFileList: [],
				query: {
					pageNumber: 1,
					pageSize: 30
				},
				pageTotal: 0,
				addCommentVisible: false,
				replyData: [],
				commentThreeData: []
			}
		},
		methods: {
			async expandChange(row, expanded) {
				const res = await this.$get('/admin/user/pageQuestionCommentHui', {
					questionId: row.questionId,
					userId: row.userId
				})
				if (res.code == 1000) {
					row.replyData = res.data.list
				}
			},
			handleClose() {
				this.$emit('handleCommentOk')
				this.commentVisible = false
			},
			//删除
			async delComment(id) {
				const res = await this.$postForm('/admin/user/deleteComment', {
					id
				})
				if (res.code == 1000) {
					this.$message.success('删除成功')
					this.searchComment()
				}
			},
			// 提交评论内容
			async addCommentSave() {
				if (this.$.isEmpty(this.commentForm.content)) {
					this.$message.warning('请输入内容!')
					return
				}
				if (this.commentForm.id) {
					const res = await this.$post('/admin/user/editCommentContent', this.commentForm)
					if (res.code == 1000) {
						this.addCommentVisible = false
						this.searchComment()
					}
				} else {
					const res2 = await this.$post('/admin/user/commentVirtual', this.commentForm)
					if (res2.code == 1000) {
						this.addCommentVisible = false
						this.searchComment()
					}
				}
			},
			//点击图片库
			clickImg() {
				this.$refs.imgLibrary.show()
			},
			//获取选中的图片
			handleImgOk(data) {
				this.$set(this.commentForm, 'userIcon', data)
			},
			getImgData(data) {
				if (data && data.length != 0) {
					this.commentForm.userIcon = data[0]
				}
			},
			handlePageExamChange(val) {
				this.examQuery.pageNumber = val
				this.searchComment()
			},
			handleSizeExamChange(val) {
				this.examQuery.pageSize = val
				this.searchComment()
			},
			show(id) {
				this.commentForm.questionId = id
				this.searchComment()
				this.commentVisible = true;
			},
			async searchComment() {
				const res = await this.$get('/admin/user/pageQuestionComment', {
					questionId: this.commentForm.questionId
				})
				if (res.code == 1000) {
					this.tableCommentData = res.data.list;
					this.pageTotal = res.data.totalRow
					for (let item of this.tableCommentData) {
						this.$set(item, 'replyData', [])
					}
				}
			},
			async commentVirtualThree() {
				const res = await this.$postForm('/admin/user/commentVirtualThree')
				if (res.code == 1000) {
					this.commentThreeData = res.data
				}
			},
			//新增编辑评论
			addComment(row) {
				if (row.id) {
					this.commentTitle = '编辑评论'
					this.commentForm = JSON.parse(JSON.stringify(row))
					if (!this.$.isEmpty(this.commentForm.userIcon)) {
						this.commentFileList = [{
							url: this.commentForm.userIcon
						}]
					}
				} else {
					this.commentTitle = '新增评论'
					this.commentForm = {
						questionId: this.commentForm.questionId
					}
					this.commentFileList = []
				}
				this.commentVirtualThree()
				this.addCommentVisible = true
			},
		}
	}
</script>

<style>
</style>